<template>
  <div class="detail">
    <div class="head">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="tu">
        <img :src="list.coverImg" alt="">
      </div>
      <h5>{{list.descriptions}}</h5>
    </div>
    <div class="mid">
      <div class="yuan">
        <span>规格</span> <van-button round type="info" size="mini" class="biao" color="rgba(204, 192, 180, 1)">大</van-button><br>
        <span>温度</span> <van-button round type="info" size="mini" class="biao" color="rgba(242, 242, 242, 1)">冰</van-button> <van-button round type="info" size="mini" class="biao" color="rgba(204, 192, 180, 1)">热  </van-button><br>
        <span>糖</span> <van-button round type="info" size="mini" color="rgba(204, 192, 180, 1)" class="biao">无糖</van-button> <van-button round type="info" size="mini" color="rgba(242, 242, 242, 1)" class="biao">有糖</van-button><br>
        <span>奶</span> <van-button round type="info" size="mini" class="biao" color="rgba(204, 192, 180, 1)">无奶</van-button> <van-button round type="info" size="mini" class="biao" color="rgba(242, 242, 242, 1)" >有奶  </van-button>
      </div>
      <div class="x"></div>
      <div class="dks">
        <span>大咖说</span>
        <p>川崎英典</p><b>WBC世界冠军</b>
        <p>Enjoy the ginger and banana flavors along withshaved white chocolate melting in your mouth.You will find a perfect balance of each flavorand sweetness. I hope this drink warms you upand fills your heart. Merry Christmas!</p>
      </div>
      <div class="ms">
        <span>商品描述</span><br>
        <p>经典日式冲绳黑糖风味拿铁，黑糖与咖啡的美妙融合，香甜温暖、自然醇厚，口感绵长。(建 议到店饮用，奶油融化前口感更佳)
主要原材料:浓缩咖啡、牛奶、黑糖调味糖浆、原味调味糖浆、可选择添加搅打奶油(含香草风味糖浆)图片仅供参考，请以实物为准，建议取餐后尽快饮用。</p>
      </div>
    </div>
    <div class="foot">
      <div class="x"></div>
      <div class="add">
        <h4>¥{{list.price}}</h4>
        <p>{{list.name}}  ¥{{list.price}}+无糖¥0+  无奶 ¥0</p>
        <van-stepper class="bj" v-model="value" />
      </div>
      <div class="x"></div>
      <div class="dh">
        <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton(id,value)" />
        <van-goods-action-button type="danger" text="立即购买" @click="buyHandle" />
      </van-goods-action>
      </div>

    </div>
  </div>
</template>
<script>
import { detail } from '../api/detail'
import { addProducts } from '../api/cart'
export default {
  data() {
    return {
      value: 1,
      id:"",
      list:[],
    }
  },
    async created() {
      this.id = this.$route.query.id
      //console.log(this.id);
      const res = await detail(this.id)
      this.list = res.data;
    },
    methods: {
      onClickLeft() {
        this.$router.push({name:'caiDan'});
    },
      onClickIcon() {
        this.$router.push({name:'Cart'});
    },
      onClickButton(id,value) {
        this.add(id,value);
    },
    async add(id,value) {
      const res = await addProducts({product:id,quantity:value});
      //console.log(res);返回接入购物车成功的信息
    },
    buyHandle(){

    },
  }
}
</script>
<style scoped>
  .detail{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .mid{
    flex: 1;
    overflow: auto;
    padding: 10px 0;
    background: white;
  }
.mid span{
  color: rgba(56, 56, 56, 1);
	font-size: 14px;
	text-align: left;

}
  img{
    margin: 0 auto;
    width: 60%;
    height: 70%;
    display: block;

  }
  h5{
    text-align: center;
    margin: 0;
  }
.head{
  width: 100%;
  height: 278px;
}
.tu{
  width: 100%;
}
.foot{
  width: 100%;
  height: 102px;
}
h4,p{
  margin: 0;
  padding: 0;
}
p{
  color: rgba(80, 80, 80, 1);
	font-size: 10px;
	line-height: 150%;
	text-align: left;
}
h4{
  color: rgba(56, 56, 56, 1);
	font-size: 18px;
	text-align: left;
	font-weight: bold;
}
.add{
   width: 100%;
  height: 50px;
  position: relative;
}
.bj{
  position: absolute;
  right: 10px;
  top: 10px;
}
.x{
  width: 100%;
	height: 1px;
	color: rgba(80, 80, 80, 1);
	background-color: rgba(242, 242, 242, 1);
	text-align: center;
}
.dh{
  width: 100%;
  height: 50px;
}
.biao{
  margin-left: 20px;
  margin-bottom: 10px
}
.van-goods-action{
position: relative;
}
</style>
